<template>
  <label>
    <span>
      <input
        v-if="group"
        type="checkbox"
        :disabled="disabled"
        :value="label"
        v-model="model"
        @change="change"
      />
      <input v-else type="checkbox" :disabled="disabled" :checked="currentValue" @change="change" />
    </span>
    <slot></slot>
  </label>
</template>

<script>
import { findComponentUpward } from "@utils/assist.js";
import emitter from "@mixins/emitter";
export default {
  name: "iCheckbox",
  mixins: [emitter],
  props: {
    label: {
      //label 只会在组合使用时有效，结合 model 来使用
      type: [String, Number, Boolean]
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      // 它只能由父级修改，本身是不能修改的
      type: [String, Number, Boolean],
      default: false
    },
    trueValue: {
      type: [String, Number, Boolean],
      default: true
    },
    falseValue: {
      type: [String, Number, Boolean],
      default: false
    }
  },
  data() {
    return {
      model: [], //父级 CheckboxGroup 的 value
      group: false,
      currentValue: this.value,
      parent: null
    };
  },
  methods: {
    change(event) {
      console.log("执行checkbox的change方法");
      if (this.disabled) {
        return false;
      }
      const checked = event.target.checked;
      this.currentValue = checked;
      const value = checked ? this.trueValue : this.falseValue;
      this.$emit("input", value);

      if (this.group) {
        console.log("执行checkbox-group的change方法");
        this.parent.change(this.model);
      } else {
        this.$emit("on-change", value);
        this.dispatch("iFormItem", "on-form-change", value); //change 事件触发时，向 Form 派发一个事件
      }
    },
    updateModel() {
      this.currentValue = this.value === this.trueValue;
    }
  },
  watch: {
    value(val) {
      //value 使用 watch 进行了监听，当父级修改它时，会调用 updateModel 方法，同步修改内部的 currentValue
      if (val === this.trueValue || val === this.falseValue) {
        console.log("执行checkbox的watch方法");
        this.updateModel();
      } else {
        throw "Value should be trueValue or falseValue.";
      }
    }
  },
  mounted() {
    this.parent = findComponentUpward(this, "iCheckboxGroup");
    if (this.parent) {
      this.group = true;
    }
    if (this.group) {
      this.parent.updateModel(true); //并触发 CheckboxGroup 的 updateModel 方法,有助于扩展，可以将true去掉
    } else {
      this.updateModel();
    }
  }
};
</script>

<style></style>
